
<template>
  <span @click="clickShow">关闭</span>
  <Picker
    v-if="props.isShow"
    :data="emojiIndex"
    :emojiSize="18"
    :showPreview="false"
    :infiniteScroll="false"
    :i18n="emojiI18n"
    set="apple"
    @select="handleEmoji"
  />
</template>
<script setup>
// all emoji sets.
import data from 'emoji-mart-vue-fast/data/all.json'
// Import default CSS
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
const props = defineProps({
  modelValue: [String, Object, Array],
  // 是否显示
  isShow: {
    type: Boolean,
    default: true,
  },
});
// 定义i18n
const emojiI18n = {
  search: '搜索',
  notfound: 'No Emoji Found',
  categories: {
    search: '搜索结果',
    recent: '经常使用',
    smileys: '表情与情感',
    people: '人物与身体',
    nature: '动物与自然',
    foods: '食物与饮料',
    activity: '活动',
    places: '旅行与地理',
    objects: '物品',
    symbols: '符号标志',
    flags: '旗帜',
    custom: 'Custom',
    joy: '哭笑'
  }
}
const emojiIndex = new EmojiIndex(data)
// 选中emoji
const handleEmoji = (e) => {
  // console.log(e)
  console.log(e.native)
  props.modelValue.value + e.native
  emit("update:modelValue", );
}

function clickShow(){
  props.isShow.value = !props.isShow.value
}
</script>

<style scoped lang="scss">

</style>
